<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Required label examples</title>
  </head>

<body>
    <form>
        <p>Required fields are followed by <span aria-label="required">*</span>.</p>

        <!-- So this: -->
        <!--<div>
          <label for="username">Name:</label>
          <input type="text" name="username">
          <label for="username"><span aria-label="required">*</span></label>
        </div>-->

        <!-- would be better done like this: -->
        <!--<div>
          <label for="username">
            <span>Name:</span>
            <input id="username" type="text" name="username">
            <span aria-label="required">*</span>
          </label>
        </div>-->

        <!-- But this is probably best: -->
        <div>
          <label for="username">Name: <span aria-label="required">*</span></label>
          <input id="username" type="text" name="username">
        </div>
    </form>
</body>

</html>
